<template>
  <div class="wind">

    <div class="One1">
      <span class="One1sp1">购物车</span>
      <span @click="ment" v-if="bol" class="One1sp3">管理</span>
      <span @click="ments" v-else class="One1sp2">完成</span>
    </div>
    <div class="One"></div>
    <div class="One2" v-for="(item,index) in dataList" :key="item.id">
      <div class="Oe2d1">
        <van-checkbox @change="choose(index)" v-model="item.check"></van-checkbox>
        <div class="Oe2d2">
          <a>
            <van-icon name="shop-o" size="0.22rem"/>
            <p>{{item.name}}</p>
          </a>
          <van-icon name="arrow" size="0.22rem" color="#d2d3dc"/>
        </div>
      </div>
      <van-row class="One30" type="flex" justify="space-around" align="center">
        <van-col span="2">
          <van-checkbox @change="choose(index)" v-model="item.check"></van-checkbox>
        </van-col>
        <van-col span="4">
          <div class="One3">
            <img :src="item.img" alt>
          </div>
        </van-col>
        <van-col class="One301" span="13">
          <p>{{item.info.name}}</p>
          <div class="One32">
            <span class="Oe2sp1">￥{{item.sell_price}}</span>
            <span class="Oe2sp2">
              <van-stepper
                :async-change="true"
                @plus="jia(item.count)"
                @minus="jian(item.count)"
                v-model="item.count"
              />
            </span>
          </div>
        </van-col>
      </van-row>
    </div>
    <!-- todo -->
    <!-- todo end -->
    <div v-show="dataList.length>0" class="One4">
      <van-checkbox v-model="checked">全选</van-checkbox>
      <div @click.stop="all" class="One4-checked"></div>
      <div v-if="bol" class="One42">
        <span class="Oe1sp0">合计：￥{{number}}</span>
        <span @click="Pays()" class="Oe1sp1">结算</span>
      </div>
      <div v-else class="One41">
        <span @click="shoucang" class="Oe1sp0">移入收藏夹</span>
        <span @click="removeCart" class="Oe1sp1">删除</span>
      </div>
    </div>
    <div v-show="dataList.length==0" class="onull">
      <img src="../assets/1-01.png" alt>
      <p class="onlp1">赶快去添加商品到购物车吧</p>
      <p class="onlp2">"在忙，也要记得买点什么犒劳自己~"</p>
    </div>
    <footer-nav :active="3"></footer-nav>
    <div class="bgs"></div>
  </div>
</template>

<script>
import FooterNav from "../components/FooterNav";
import request from "../../static/base.js";
import { setInterval } from 'timers';
export default {
  name: "ShoppingCart",
  components: {
    FooterNav
  },
  data() {
    return {
      check: false,
      // checked: false, // 全选
      num1: 1, // 计步器
      num2: 1,
      num3: 1,
      bol: true, // 页面状态
      pric: 820, // 商品单价
      pric1: 1150,
      pric2: 580,
      number: 0, // 总价
      dataList: [],
      chooseList: [], //用来记录用户所选择的项目
      gids:0,       // 商品id
      cont:0,       //商品数量
      type:'',      // 商品类型
      datasl:'',    // 添加购物车商品信息
      types:[],     // 商品多余1时存储类型
    };
  },
  created: function() {
    this.number = 0;
    this.get_data();
    // this.datasl = this.$router.params;
    // console.log(this.datasl)
  },
  mounted() {
    // this.$dialog.alert({
    //   message: '弹窗内容'
    // });
  },
  computed: {
    checked: {
      get: function(){
        let count = 0;
        for (let i in this.dataList) {
          if (this.dataList[i].check){
            count += 1
          }
        }
        if(count == this.dataList.length){
          return true
        }
        return false
      },
      set: function(){
        return true
      }
    }
  },
  methods: {
    Pays(){
      let arr = []//push选中，向后传值
      if(this.number == 0){
        this.$dialog.alert({
            title: "提示", //加上标题
            message: '请选择购买商品', //改变弹出框的内容
            showCancelButton: true //展示取水按钮
        })
      }else{
        this.dataList.forEach(item=>{
          if(item.check){
            arr.push(item)
          }
        })
        console.log(arr)
        this.$router.push({
        name:'order1',
        params:{
          gid: this.gids,
          num: this.cont,
          type: this.type,
          page:1
        }
      })
      }
    },
    get_data() {
      request({
        url: "?controller=theapi&action=cart_list",
        method: "post"
      }).then(res => {
        console.log(res);
        let temp = res.data.data.data;
        for (let i in temp) {
          temp[i].check = false;
        }
        console.log(temp);
        this.dataList = temp;
        this.sum_price();
      });
    },
    sum_price() {
      this.number = 0;
      for (let i in this.dataList) {
        if (this.dataList[i].check) {
          // console.log(this.dataList[i].count, this.dataList[i].sell_price);
          this.number += this.dataList[i].count * this.dataList[i].sell_price;
          this.gids = this.dataList[i].id;
          this.cont = this.dataList[i].count;
          this.type = this.dataList[i].type
        }
      }
      console.log(this.dataList);
    },
    choose(index) {
      // console.log("888", index);
      //this.dataList[index].check = !this.dataList[index].check;
      this.sum_price();
    },
    removeCart() {
      let type = "goods";
      this.chooseList.length = 0;
      let cont1 = 0;
      for (let i in this.dataList) {
        if (this.dataList[i].check) {
          this.chooseList.push(this.dataList[i].id);
          type = this.dataList[i].type;
          console.log(this.chooseList);
          console.log(i);

          this.types.push(this.dataList[i].type);
          console.log(this.types);
          console.log(this.chooseList);
          cont1++;
        }
      }
      console.log("删除购物车中的商品1:", this.chooseList[0]);
      if(this.chooseList.length > 1){
        for(let i in this.chooseList){
          console.log(i)
          this.duoxuan(i)
        }
      }else{
        console.log('123')
        request({
          url: "?controller=theapi&action=removeCart",
          method: "get",
          params: {
            goods_id: this.chooseList[0],
            type
          }
        }).then(res => {
          console.log("删除购物车中的商品:", res);
          if (res.data.data == "删除成功") {
            this.$notify("删除成功");
            this.get_data();
          } else {
            this.$notify("操作出错");
          }
        });
      }
    },
    duoxuan(n){
      console.log(n);
      request({
        url: "?controller=theapi&action=removeCart",
        method: "get",
        params: {
          goods_id: this.chooseList[n],
          type:this.types[n]
        }
      }).then(res => {
      console.log("删除购物车中的商品:", res);
        if (res.data.data == "删除成功") {
          this.$notify("删除成功");
          this.get_data();
        } else {
          this.$notify("操作出错");
        }
      });
    },
    all() {
      if(this.checked){
        for (let i in this.dataList) {
          this.dataList[i].check = false;
          this.sum_price();
        }
      }else{
        for (let i in this.dataList) {
          this.dataList[i].check = true;
          this.sum_price();
        }
      }
    },
    shoucang() {
      this.chooseList.length = 0;
      for (let i in this.dataList) {
        if (this.dataList[i].check) {
          this.chooseList.push(this.dataList[i].info.id);
        }
      }
      request({
        url: "?controller=theapi&action=favourite_add",
        method: "get",
        params: {
          gid: this.chooseList[0]
        }
      }).then(res => {
        console.log("shoucang", res);
        if (res.data.data == "收藏成功") {
          this.$notify("收藏成功");
          this.get_data();
        } else {
          this.$notify(res.data.data);
        }
      });
    },
    ment() {
      this.bol = false;
    },
    ments() {
      this.bol = true;
    },
    jia(price) {
      this.sum_price();
    },
    jia1() {
      this.number += this.pric1;
    },
    jia2() {
      this.number += this.pric2;
    },
    jian(price) {
      this.sum_price();
    },
    jian1() {
      this.number -= this.pric1;
    },
    jian2() {
      this.number -= this.pric2;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.wind {
  background: #f5f6f7;
  position: absolute;
  width: 100%;
  min-height: 100%;
}

.onull {
  text-align: center;
}
.onull img {
  width: 2.15rem;
  height: 2.15rem;
  margin-bottom: 0.5rem;
  margin-top: 0.9rem;
}
.One1 {
  position: relative;
  width: 100%;
  height: 1.3rem;
  display: flex;
  line-height: 1rem;
  justify-content: space-between;
  align-items: center;
  z-index: 99;
}
.One1sp1 {
  font-size: 0.3rem;
  font-weight: bold;
  color: #fff;
  margin-left: 0.3rem;
}
.One1sp2 {
  margin-right: 0.3rem;
  display: inline-block;
  width: 1.07rem;
  height: 0.41rem;
  border-radius: 0.22rem;
  background: #fff;
  text-align: center;
  font-size: 0.26rem;
  color: #f52e67;
  line-height: 0.41rem;
}
.One1sp3 {
  margin-right: 0.3rem;
  display: inline-block;
  font-size: 0.28rem;
  color: #fff;
}
.One2 {
  width: 6.9rem;
  padding-bottom: 0.25rem;
  background: #fff;
  border-radius: 0.3rem;
  margin: 0 auto;
  position: relative;
  margin-bottom: 0.2rem;
  /* z-index: 1; */
}

.wind .One2:nth-last-child(1){
  margin-bottom: 0rem;
}
.One {
  position: absolute;
  top: 0;
  left: 0;
  width: 7.5rem;
  height: 1.95rem;
  background: #fe5b6b;
  left: 0rem;
  background-image: url(../assets/member_01.jpg);
  background-size:100% 150%;
}
.One30 {
  margin-top: 0.2rem;
}
.Oe2d1 {
  width: 6.4rem;
  padding: 0.25rem;
  display: flex;
  justify-content: space-between;
}
.Oe2d2 {
  width: 5.7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.Oe2d2 a {
  display: flex;
  align-items: center;
}
.Oe2d2 a p {
  margin-left: 0.15rem;
  font-size: 0.25rem;
}
.One3 {
  width: 1.25rem;
  height: 1.6rem;
}
.One3 img {
  width: 100%;
  height: 100%;
}
.One31 select {
  width: 1.15rem;
  height: 0.35rem;
  border: 0rem;
  background: #f5f5f6;
  outline: none;
  border-radius: 0.08rem;
  font-size: 0.2rem;
  color: #c1c3c6;
  line-height: 0.3rem;
  margin-top: 0.1rem;
}
.One301 p {
  font-size: 0.23rem;
}
.One32 {
  display: flex;
  justify-content: space-between;
  margin-top: 0.25rem;
  align-items: center;
}
.Oe2sp1 {
  font-size: 0.25rem;
  color: #f52e67;
}
.Oe2sp1 van-stepper {
  background: #f5f5f6;
}
.One21 {
  margin-top: 0.25rem;
}
.line {
  width: 85%;
  height: 0.01rem;
  background: #c1c3c6;
  margin-left: 15%;
  margin-top: 0.5rem;
  margin-bottom: 0.35rem;
}
.One4 {
  width: 6.4rem;
  background: #595c63;
  padding: 0.25rem;
  margin: 0 auto;
  border-radius: 0.3rem;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.2rem;
  /* position: absolute; */
  /* bottom: 1.5rem; */
  /* left: 50%; */
  /* margin-left: -3.4rem; */
}
.One4-checked{
  position: relative;
  left: -1.52rem;
  width: 1.08rem;
  height: 0.48rem;
  border-radius: 0.24rem;
}
.One4 van-checkbox {
  color: #fff;
}
.Oe1sp0 {
  margin-right: 0.35rem;
  font-size: 0.27rem;
}
.Oe1sp1 {
  display: inline-block;
  width: 1.7rem;
  height: 0.7rem;
  background: #fe5167;
  border-radius: 0.15rem;
  line-height: 0.7rem;
  text-align: center;
  font-size: 0.27rem;
  color: #fff;
}
</style>
